import React from "react";
import GenerCode from './Generate';
import CreateElement from './comp/element'
import { Table, Space, Button, Row, Col, Tree } from 'antd';
import { CarryOutOutlined, FormOutlined, PlayCircleOutlined, ArrowUpOutlined, ArrowDownOutlined, DeleteOutlined, YoutubeOutlined, FolderOutlined, FileOutlined } from '@ant-design/icons';
import './index.less'
const ipcRenderer = window.require('electron').ipcRenderer;
const generCode = new GenerCode("首页测试");
class Generate extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			active: 0,
			selector: '',
			code: '',
			title: "",
			tests: [],
			columns: [
				{
					title: '事件',
					dataIndex: 'type',
					key: 'type',
				},
				{
					title: '元素',
					dataIndex: 'identify',
					key: 'identify',
				},
				{
					title: '参数',
					dataIndex: 'params',
					key: 'params',
				},
				{
					title: '操作',
					key: 'handler',
					render: (row, record, index, ctx) => (
						<Space size="middle">
							<Button type="link">测试</Button>
							<Button type="link" onClick={() => this.deleteEvent(row, index)}>删除</Button>
						</Space>
					),
				},
			]
		};
	}


	deleteEvent(row, index) {
		const { tests } = this.state;
		const events = tests[row.num].events;
		events.splice(index, 1);
		this.setState({ tests })
	}
	deleteTest(index) {
		const { tests } = this.state;
		tests.splice(index, 1);
		this.setState({ tests })
	}

	createApp() {
		generCode.update((tests) => {
			tests.forEach((test, index) => {
				test.events.forEach(ev => ev.num = index);
			})
			this.setState({
				tests: [...tests]
			})
		})
		this.setState({ title: generCode.title, tests: generCode.tests })
	}
	createTest() {
		const { tests } = this.state;
		generCode.addTest()
		this.setState({ tests: generCode.tests })
	}


	render() {
		const treeData = [
			{
				title: 'parent 1',
				key: '0-0',
				icon: <CarryOutOutlined />,
				children: [
					{
						title: 'parent 1-0',
						key: '0-0-0',
						icon: <CarryOutOutlined />,
						children: [
							{
								title: 'leaf',
								key: '0-0-0-0',
								icon: <CarryOutOutlined />,
							},
							{
								title: (
									<>
										<div>multiple line title</div>
										<div>multiple line title</div>
									</>
								),
								key: '0-0-0-1',
								icon: <CarryOutOutlined />,
							},
							{
								title: 'leaf',
								key: '0-0-0-2',
								icon: <CarryOutOutlined />,
							},
						],
					},
					{
						title: 'parent 1-1',
						key: '0-0-1',
						icon: <CarryOutOutlined />,
						children: [
							{
								title: 'leaf',
								key: '0-0-1-0',
								icon: <CarryOutOutlined />,
							},
						],
					},
					{
						title: 'parent 1-2',
						key: '0-0-2',
						icon: <CarryOutOutlined />,
						children: [
							{
								title: 'leaf',
								key: '0-0-2-0',
								icon: <CarryOutOutlined />,
							},
							{
								title: 'leaf',
								key: '0-0-2-1',
								icon: <CarryOutOutlined />,
								switcherIcon: <FormOutlined />,
							},
						],
					},
				],
			},
			{
				title: 'parent 2',
				key: '0-1',
				icon: <CarryOutOutlined />,
				children: [
					{
						title: 'parent 2-0',
						key: '0-1-0',
						icon: <CarryOutOutlined />,
						children: [
							{
								title: 'leaf',
								key: '0-1-0-0',
								icon: <CarryOutOutlined />,
							},
							{
								title: 'leaf',
								key: '0-1-0-1',
								icon: <CarryOutOutlined />,
							},
						],
					},
				],
			},
		];
		const { title, tests, dataSource, columns, active } = this.state;
		return <div className="generate">



			<div className="container">
				<div className="toolbar">
					<div className="icons">

						<FolderOutlined onClick={() => this.createApp()} />
						<FileOutlined onClick={() => this.createTest()} />
						<CreateElement generCode={generCode} />
					</div>
					<Tree
						showLine={true}
						showIcon={false}
						defaultExpandedKeys={['0-0-0']}
						// onSelect={onSelect}
						treeData={treeData}
					/>
				</div>
				{/* <div className="code">
					<h3>code :</h3>
					<pre className="preview"><code>{code}</code></pre>
				</div> */}
				<div className="content">
					<div className="tools">
						{/* <Button onClick={() => this.createApp()}>2 - 新建项目</Button> */}
						{/* <Button onClick={() => this.createTest()}>3 - 新建脚本</Button> */}
						<PlayCircleOutlined />
						<ArrowUpOutlined />
						<ArrowDownOutlined />
						<DeleteOutlined />
					</div>
					{
						title && <div className="page">
							<h2>{title}</h2>
							{
								tests && tests.map((test, key) => (
									<div key={key} className={active == key ? "test-container active" : "test-container"} onClick={() => { this.setState({ active: key }) }}>
										<Row style={{ borderBottom: '1px solid #d8d8d8' }}>
											<label style={{ lineHeight: '32px' }}>{test.title}</label>
											<Button type="link" onClick={() => this.deleteTest(key)}>删除</Button>
										</Row>
										<Row className="test-content">
											{
												test.events.map((item, index) => (
													<Row className="test-line" key={index}>
														<Col span={4}><Space size="middle">{item.type}</Space></Col>
														<Col span={8}>{item.identify}</Col>
														<Col span={4}>{item.params}</Col>
														<Col span={8}>
															<Button type="link">测试</Button>
															<Button type="link" onClick={() => this.deleteEvent(item, index)}>删除</Button>
														</Col>
													</Row>
												))
											}
										</Row>
									</div>
								))
							}

						</div>
					}
				</div>

			</div>

		</div>;
	}
}

export default Generate;
